<template>
  <div class="journey_handler">


    <el-page-header @back="goBack" content="审核流程"></el-page-header>

    <div style="width:1900px;height:30px;"></div>

    <div class="journey_box">
      <el-descriptions title="人才信息" direction="vertical" :column="2" border>
        <el-descriptions-item label="用户名">{{ personnel.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ personnel.phone }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ personnel.email }}</el-descriptions-item>
        <el-descriptions-item label="居住地" :span="2">{{ personnel.contactAddress }}</el-descriptions-item>
        <el-descriptions-item label="学校">
          <el-tag size="small">{{ personnel.graduationSchool }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="期望岗位">{{ personnel.expectPosition }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <el-steps :space="120" :active="active" :finish-status="type">
      <el-step title="未开始" ></el-step>
      <el-step title="一面"></el-step>
      <el-step title="二面"></el-step>
      <el-step title="通过面试"></el-step>
      <el-step title="未通过"></el-step>
    </el-steps>

    <div class="journey_footer">
      <el-button icon="el-icon-search" circle @click="queryStatus"></el-button>
      <el-button type="primary" icon="el-icon-edit" circle @click="AuditBtn"></el-button>
      <el-button type="success" icon="el-icon-check" circle @click="increaseEmail"></el-button>
    </div>

    <el-dialog title="阶段信息" :visible.sync="dialogVisible" width="30%">
      <div v-for="item in list" :key="item.id" class="queryStatus_dialog">
        <el-card class="box-card" style="margin:10px 10px;">
          <div class="text item" >阶段：{{ item.stage }}</div>
          <div class="text item" >备注：{{ item.remarks }}</div>
          <div class="text item" >经办人：{{ item.userName }}</div>
          <div class="text item" >审核时间：{{ item.createTime }}</div>
        </el-card>
      </div>
    </el-dialog>

    <el-dialog title="审核信息" :visible.sync="flag" width="30%" :before-close="examineClose">
      <el-form :model="examine">

        <el-form-item label="是否通过" :label-width="widths">
          <el-radio v-model="examine.status" label="未通过">未通过</el-radio>
          <el-radio v-model="examine.status" label="通过">通过</el-radio>
        </el-form-item>

        <el-form-item label="备注" :label-width="widths">
          <el-input type="textarea" :rows="4" placeholder="请输入备注" v-model="examine.remarks">
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="邮件信息填写" :visible.sync="emailFlag" width="30%" center :before-close="emailClose">
      <el-form :model="email">

        <el-form-item label="邮件标题" :label-width="widths">
          <el-input placeholder="请输入邮件标题" v-model="email.subject" clearable></el-input>
        </el-form-item>

        <el-form-item label="邮件主体内容" :label-width="widths">
          <el-input type="textarea" :rows="10" placeholder="邮件主体内容" v-model="email.text" clearable></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emailFlag = false">取 消</el-button>
        <el-button type="primary" @click="additionEmail">发送邮件</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {accordingTo, addAudit, viewLocation,showStage,emailSend} from '@/api/core/job/personnel'

export default {
  data(){
    return{
      widths:'120px',
      type:'success',
      active:0,
      personnel:{},
      flag:false,
      emailFlag:false,
      examine:{},
      dialogVisible:false,
      list:[],
      email:{}
    }
  },
  created() {
    this.accordTo()
    this.Location()
  },
  methods:{
    goBack() {
      this.$router.go(-1)
    },
    async accordTo(){
      const {data:res} = await accordingTo(this.$route.params.id)
      this.personnel = res.data.personnel
    },
    AuditBtn(){
      this.flag = true
    },
    async add(){
      this.examine.personnelId = this.$route.params.id
      const token = this.$cookies.get("token")
      const {data:res} = await addAudit(this.examine,token)
      if (res.code === 200){
        this.$message({
          message: '更新审核成功',
          type: 'success'
        });
      }else {
        this.$message.error(res.message);
      }
      await this.Location()
      this.examine = {}
      this.flag = false
    },
    async Location(){
      const {data:res} = await viewLocation(this.$route.params.id)
      this.active = res.data.active
      this.type = res.data.type
    },
    cancel(){
      this.flag = false
      this.examine = {}
    },
    async queryStatus(){
      const {data:res} = await showStage(this.$route.params.id)
      this.list = res.data.list
      this.dialogVisible = true
    },
    increaseEmail(){
      this.emailFlag = true
    },
    async additionEmail(){
      const {data:res} = await emailSend(this.email,this.$route.params.id)
      if (res.code === 200){
        this.$message({
          message: res.message,
          type: 'success'
        });
      }else {
        this.$message.error(res.message);
      }
      this.email = {}
      this.emailFlag = false
    },
    emailClose(){
      this.email = {}
      this.emailFlag = false
    },
    examineClose(){
      this.examine = {}
      this.flag = false
    }
  }
}
</script>

<style scoped>
.journey_handler{
  height:850px;
  width:1900px;
  background-color:#f6f7f9;
}
.journey_box{
  height:400px;
  margin:0 35%;
}
.el-descriptions{
  width:400px
}
.el-steps--horizontal{
  padding-left: 33%;
}
.journey_footer{
  padding:20px 42%;
}
.queryStatus_dialog{
  display:inline-block;
  width:250px;
}
</style>
